feat: match figma styles by priscila-moneo · Pull Request #960 · fntechgit/summit-admin

priscila-moneo · 2026-06-01T20:53:47Z

ref: https://app.clickup.com/t/9014802374/86b8tt4df

Summary by CodeRabbit

Style
- Refined button styling with shadow adjustments across interactive states
- Enhanced alert color consistency with primary theme palette
Refactor
- Improved theme configuration structure and architecture
- Updated accessibility implementation for form controls

coderabbitai · 2026-06-01T20:54:02Z

Warning

Review limit reached

@smarcet, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 2 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5b9a80bb-537d-471a-a62f-b699f26da043

📥 Commits

Reviewing files that changed from the base of the PR and between 0b355c5 and 35088f8.

📒 Files selected for processing (3)

src/components/CustomTheme.js
src/components/mui/custom-alert.js
src/pages/sponsors/sponsor-forms-list-page/index.js

📝 Walkthrough

Walkthrough

This PR refines MUI theme configuration by merging a CustomThemeBase into the theme, updates button and alert component overrides for shadow and color consistency, formats a CustomAlert component, and migrates the sponsor forms checkbox to use the newer slotProps accessibility API.

Changes

UI Styling and Accessibility Refinements

Layer / File(s)	Summary
MUI theme base merge and component styling refinements `src/components/CustomTheme.js`, `src/components/mui/custom-alert.js`	CustomTheme now merges CustomThemeBase via `createTheme(CustomThemeBase, {...})`. MuiButton `boxShadow: "none"` applied to root and all interaction states (hover, active, focus). MuiAlert `standardInfo` extended so both container text and nested `.MuiAlert-message` use `theme.palette.primary.dark`. CustomAlert `sx` prop condensed to single-line format.
Sponsor forms checkbox accessibility migration `src/pages/sponsors/sponsor-forms-list-page/index.js`	"Show archived" checkbox migrated from `inputProps` to `slotProps.input` for `aria-label` assignment, preserving checked binding and change handler.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

smarcet
santipalenque

Poem

🐰 Buttons shed their shadows, themes now blend with grace,
Alerts speak in harmony, colors find their place,
Checkboxes speak up loud with aria-labels bright,
UI polish ripples through—accessibility done right!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'feat: match figma styles' is vague and generic, using non-descriptive language that doesn't convey the actual technical changes made to the codebase.	Consider a more specific title that reflects the actual changes, such as 'feat: update MUI theme configuration and component styles' or 'feat: align custom theme and alert styles with design system'.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feature/match-figma-styles

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

santipalenque · 2026-06-03T12:09:43Z

+      mb: 2,
+      "& .MuiAlert-message": {
+        fontWeight: "normal",
+        ...(severity === "info" && { color: "#1E88E5" })


@smarcet this is the kind of things I was talking about. This color should come from CustomTheme and have design team define what colors we use for info.main, info.light and info.dark .
@priscila-moneo probably want to make this two changes on CustomTheme

santipalenque · 2026-06-03T12:11:20Z

          <Grid2 size={12}>
            <Box sx={{ px: 3, my: "10px" }}>
-              <Typography variant="h5">
+              <Typography variant="h5" color="text.primary">


isn't text.primary the default color ?

priscila-moneo · 2026-06-03T16:36:20Z

Note: tests/build are failing because we need to update uicore version with new theme created.

santipalenque · 2026-06-04T12:29:43Z

      styleOverrides: {
        root: ({ ownerState }) => ({
          fontWeight: 500,
+          boxShadow: "none",


looks like these should go in uicore too, I think you need to ask which of the changes are needed for ALL APPs and which ones only for admin. I guess all of the are for all apps, right @smarcet ?

smarcet · 2026-06-23T20:37:03Z

@priscila-moneo uicore version 5.0.35

smarcet

@priscila-moneo please review

Copilot

Pull request overview

This PR updates the app’s MUI styling/theme configuration to better align UI components (buttons, alerts, form controls) with the Figma design system.

Changes:

Updated a sponsor forms “Show archived” checkbox label/control styling and accessibility props.
Refined CustomAlert styling formatting and adjusted alert theme overrides for more consistent info coloring and message weight.
Refactored theme creation to extend from CustomThemeBase and removed button box shadows across interaction states.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
src/pages/sponsors/sponsor-forms-list-page/index.js	Adjusts checkbox accessibility props and prevents label wrapping to match intended layout.
src/components/mui/custom-alert.js	Consolidates `sx` styling and (should) ensure icon behavior is correct for default alerts.
src/components/CustomTheme.js	Extends base theme, removes button shadows, and improves alert info/message styling consistency.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

  <Alert
    severity={severity}
    icon={!hideIcon}
-    sx={{
-      justifyContent: "start",
-      alignItems: "center",
-      mb: 2
-    }}
+    sx={{ justifyContent: "start", alignItems: "center", mb: 2 }}
  >


Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>

smarcet

LGTM

priscila-moneo force-pushed the feature/match-figma-styles branch from 6edab8c to 08254b7 Compare June 1, 2026 20:55

priscila-moneo requested review from santipalenque and smarcet June 2, 2026 15:28

santipalenque reviewed Jun 3, 2026

View reviewed changes

priscila-moneo requested a review from santipalenque June 3, 2026 16:27

priscila-moneo force-pushed the feature/match-figma-styles branch from 0b355c5 to c4e9a56 Compare June 3, 2026 16:35

santipalenque reviewed Jun 4, 2026

View reviewed changes

smarcet requested a review from santipalenque June 23, 2026 20:37

smarcet requested changes Jun 24, 2026

View reviewed changes

smarcet requested review from Copilot and smarcet June 30, 2026 17:37

Copilot started reviewing on behalf of smarcet June 30, 2026 17:37 View session

Copilot AI reviewed Jun 30, 2026

View reviewed changes

Comment thread src/components/mui/custom-alert.js

Comment on lines 5 to 9

<Alert

severity={severity}

icon={!hideIcon}

sx={{

justifyContent: "start",

alignItems: "center",

mb: 2

}}

sx={{ justifyContent: "start", alignItems: "center", mb: 2 }}

>

priscila-moneo added 2 commits June 30, 2026 15:25

feat: match figma styles

7d35adb

Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>

fix: feedback from PR

35088f8

Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>

smarcet force-pushed the feature/match-figma-styles branch from 4c8fe34 to 35088f8 Compare June 30, 2026 18:26

smarcet approved these changes Jun 30, 2026

View reviewed changes

smarcet merged commit cfc6779 into master Jun 30, 2026
9 checks passed

Uh oh!

Conversation

priscila-moneo commented Jun 1, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

❌ Failed checks (1 inconclusive)

Uh oh!

santipalenque Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

santipalenque Jun 3, 2026

Choose a reason for hiding this comment

Uh oh!

priscila-moneo commented Jun 3, 2026

Uh oh!

santipalenque Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

smarcet commented Jun 23, 2026

Uh oh!

smarcet left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

smarcet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

priscila-moneo commented Jun 1, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 1, 2026 •

edited

Loading